.rarticle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 236px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}
.rarticle h3 {
  flex: 1;
  line-height: 47px;
  padding-left: 15px;
  color: salmon;
  font-size: 17px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}
.rarticle .content {
  flex: 4;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.rarticle .content li {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.rarticle .content li a {
  flex: 9;
  font-size: 15px;
  color: #999;
  /* 单行溢出文字省略号显示必须满足三个条件： */
  /* 1 强制一行显示文本 */
  white-space: nowrap;
  /* 2 超出的部分文本进行隐藏 */
  overflow: hidden;
  /* 3 文字用省略号代替超出的部分 */
  text-overflow: ellipsis;
}
.rarticle .content li a .line {
  height: 1px;
}
.rarticle .content li span {
  flex: 1;
  color: #999;
  cursor: pointer;
}
.rarticle .content li:hover a,
.rarticle .content li:hover span {
  color: salmon;
}
